<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Styles
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////--> 
    <link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
    


<title>jQuery Mobile Web App</title>
<link href="css/maokong.css" rel="stylesheet" type="text/css"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

  <link rel="stylesheet"  href="css/jquery.mobile.structure.css" />
  <link rel="stylesheet" href="css/jquery.mobile.theme.css" />
  
  <script>
    var userAgent = navigator.userAgent + '';
    if (userAgent.indexOf('iPhone') > -1) {
      document.write('<script src="js/lib/cordova-iphone.js"></sc' + 'ript>');
      var mobile_system = 'iphone';
    } else if (userAgent.indexOf('Android') > -1) {
      document.write('<script src="js/lib/cordova-android.js"></sc' + 'ript>');
      var mobile_system = 'android';
    } else {
      var mobile_system = '';
    }
  </script>
  
  <script src="js/lib/jquery.js"></script>
  <!-- your scripts here -->
  <script src="js/app/app.js"></script>
  <script src="js/app/bootstrap.js"></script>
  <script src="js/lib/jquery.mobile.js"></script>
   <script type='text/javascript' src='scripts/camera.min.js'></script> 
  <script src="js/jquery.easing.1.3.js"></script>
    <script>
	function onDeviceReady() {
	    console.log("We got device ready");
	    cordova.exec(null, null, "SplashScreen", "hide", []);
	}
	    // Soon to be
	    // navigator.splashscreen.hide();
	</script>
    <script>
		jQuery(function(){
			
			jQuery('#camera_wrap_2').camera({
				height: '400px',
				loader: 'bar',
				pagination: false,
				thumbnails: true
			});
		});
	</script>

</head>
  <body>
<style type="text/css">
	.camera_next { display:none;}
	.camera_commands { display:none;}
	.camera_prev { display:none;}
  .ui-page {
      background-image: url(images/home_bg.jpg);
      background-repeat: repeat-x;
  }
  .ui-footer {
  }
  
  .title {
      margin: 0px;
      padding: 0px;
      width: 100%;
      border-top-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 0px;
      border-left-width: 0px;
      border-top-style: 0;
      border-right-style: 0;
      border-bottom-style: 0;
      border-left-style: 0;
      background-image: url(images/bar_store.JPG);
  }
  
  </style>

<div data-role="page" data-add-back-btn="true" data-back-btn-text="上一頁"
data-back-btn-theme="e" id="page4">
    <div data-role="header" class="title" data-theme="a" data-position="fixed">
    <h1><img src="images/7-11.jpg">玫瑰鹽佐酥烤牛小排</h1>

    <div data-role="navbar" >
      <ul data-content-theme="e">
        <li><a href="#index"><img id="storeImg" src="images/M_store2.png"/></a></li>
        <li><a href="#index"><img id="bonusImg" src="images/M_bonus2.png"/></a></li>
        <li><a href="#contacts"><img src="images/M_record2.png"/></a></li>
        <li><a href="#events"><img src="images/M_favorite2.png" /></a></li>
      </ul>
      </div>
      <div data-role="navbar">
<ul >  
<li><a class="ui-btn-active ui-state-persist" href="#" data-theme="c"
>
飲食</a>
<li><a href="#" data-theme="c" >用餐</a>

<li><a href="#"data-theme="c" >購物</a>
<li><a href="#" data-theme="c">咖啡</a>
<li><a href="#page4"  data-theme="c" >附近店家</a>
</ul>
<script>

	var ajaxQueryStoresString='';
	function ajaxQueryStores(data)
	{
		ajaxQueryStoresString='';
		var storeId='';
		for(var i=0;i<data.length;i++)
		{
			if(storeId!=data[i].Store.id)
			{
				if(i==0)
				{
			ajaxQueryStoresString+=
'        <div data-role="collapsible" style="white-space:normal" data-content-theme="c" data-collapsed="false">'
;
				}
				else
				{
			ajaxQueryStoresString+=
'        <div data-role="collapsible" style="white-space:normal" data-content-theme="c" data-collapsed="true">'
;
				}
			ajaxQueryStoresString+=
'    <h3>  <div  style="float:left"> <img src="images/7-11.jpg"> </div>                            '
		+'          <div>                                                              '
		+'          <div >'+data[i].Store.name+'  '+data[i].Store.tel+'</div>                                       '
		+'          <div>'+data[i].Store.addr+'</div>'
		+'          <div>156&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公尺</div>                   '
		+'        </div>                                                               '
		+'          </h3>                                                               '
+'   <p>                                             ';
		for(var j=0;j<data[i].Promo.length;j++)
		{
			ajaxQueryStoresString+=
			'<div data-role="collapsible" style="white-space:normal" data-content-theme="c" data-collapsed="true">'
			+"<h2><span style='color:red'>"
			+""+data[i].Promo[j].title+""
			+"</span></h2><p/>"
			+"<li>"+data[i].Promo[j].content+"</li>"
			+"<li>"+data[i].Promo[j].needPoints+"</li>"
		+'        </div>                                                               '
			;
		}
			ajaxQueryStoresString+='	   </p>                                                                                                  '
+'</div>                                                                                                        '
;
		}
			storeId=data[i].Store.id;
			}
			
	}
  $( '#page2' ).live( 'pagecreate',function(event){
   $("#bonusImg").live('click',(function(e) {
	  //$.mobile.pageLoading();     
$.mobile.showPageLoadingMsg();
jQuery.ajax({
                url: 'http://localhost/mcouponMgr/stores/ajaxQueryStores.json',
                type: 'post',
                data: {
                    method: 'set_user_prizes'
                },
                dataType: 'jsonp',
                jsonp: true,
                jsonpCallbackString: ajaxQueryStores,
                complete: function(jqXHR){
                    if(jqXHR.status==200)
					{
						($("#page2Content").html(ajaxQueryStoresString)).trigger('create');
					}
					else
					{
						($("#page2Content").html(' <li>無法連線server，請稍後再試')).trigger('create');
						
					}
					$.mobile.hidePageLoadingMsg();

					
                }
				

});
//$.mobile.pageLoading(true);     
	}));
});

</script>
  </div>
  </div>
    <div data-role="content">
        <div class="camera_wrap camera_magenta_skin" id="camera_wrap_2">
            <div data-thumb="images/mou_1_2.jpg" data-src="images/mou_1_1.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>貓空大優惠</em> 買一送一
                </div>
            </div>
            <div data-thumb="images/mou_2_2.jpg" data-src="images/mou_2_1.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>貓空大優惠</em> 買一送一
                </div>
            </div>
            <div data-thumb="images/mou_3_2.jpg" data-src="images/mou_3_1.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>貓空大優惠</em> 買一送一
                </div>
            </div>
        </div><!-- #camera_wrap_2 -->
    </div><!-- .fluid_container -->
    
    <div data-role="footer" data-position="fixed">
    <h1>tis is a test</h1>
  </div>
  </div>
     </div>
  </div>

</body>
  </html>
